<template>
  <div>
    <el-card>
      <div class="select_box">
        <el-row>
          <el-col :span="7">
            <div class="title">工程名称</div>
            <el-input style="width:80%" v-model="selectInfo.name" size="small" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="7">
            <div class="title">工程编号</div>
            <el-input style="width:80%" v-model="selectInfo.code" size="small" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="7">
            <div class="title">是否已关联勘察</div>
            <el-select style="width:80%" v-model="selectInfo.survey" size="small" clearable placeholder="请选择">
              <el-option label="已关联" :value="true"></el-option>
              <el-option label="未关联" :value="false"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="24">
            <el-button size="small" @click="reset">重置</el-button>
						<el-button type="primary" size="small" @click="handleChangePage">确定</el-button>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px;">
        <el-row>
          <el-col :span="24" style="display: flex;justify-content: right;">
            <el-button size="small" @click="exportList">导出项目</el-button>
            <el-upload
              style="margin: 0 10px;"
              class="upload-demo"
              :headers="headerToken()" 
              :action="importUrl"
              :file-list="fileList"
              :show-file-list="false"
              :on-success="handleSuccess"
              :on-change="handleChange">
              <el-button size="small">批量导入项目</el-button>
            </el-upload>
            <el-button size="small" @click="downloadDemo()">导入模板<i class="el-icon-download el-icon--right"></i></el-button>
            <el-button size="small" type="primary" @click="detail={}, showDialog=true">新建项目</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="table_box">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" v-loading="loading" 
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="45">
          </el-table-column>
					<el-table-column prop="name" label="工程名称">
					</el-table-column>
					<el-table-column prop="code" label="工程编号">
					</el-table-column>
					<el-table-column prop="ownerUnit" label="建设单位">
					</el-table-column>
          <el-table-column prop="workUnit" label="施工单位">
					</el-table-column>
          <el-table-column prop="department" label="项目部">
					</el-table-column>
          <el-table-column prop="typeName" label="工程类型">
					</el-table-column>
          <el-table-column prop="surveyId" label="是否已关联勘察">
            <template slot-scope="scope">
							{{ scope.row.surveyId ? '已关联' : '未关联' }}
						</template>
					</el-table-column>
          <el-table-column prop="createTime" :formatter="dateFormat" label="创建时间">
          </el-table-column>
					<el-table-column fixed="right" label="操作" width="140">
						<template slot-scope="scope">
							<el-button @click="detail=scope.row, showDialog=true" type="text" size="small">详情</el-button>
              <el-button @click="detail=scope.row, showInformation=true" type="text" size="small">项目资料</el-button>
						</template>
					</el-table-column>
				</el-table>
        <div class="footer">
          <el-pagination @current-change="handleChangePage" :current-page.sync="page" :page-size="pageSize" layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </div>
    </el-card>

    <el-dialog :title="detail.id ? detail.name : '新建项目'" :visible.sync="showDialog" :close-on-click-modal="false" width="600px">
      <project-dialog v-if="showDialog" :detail="detail" @close="close"></project-dialog>
    </el-dialog>
    <!-- 项目资料 -->
    <el-drawer
			:title="detail.id ? detail.name + '项目资料库' : ''"
			:visible.sync="showInformation"
      :wrapperClosable="false"
      :destroy-on-close="true"
			size="80%"
			:direction="'rtl'">
      <information-view :detail="detail"></information-view>
    </el-drawer>
  </div>
</template>

<script>
import { getProjectPage, exportProject, exportDemo } from '@/api/project/index'
import { parseTime } from '@/utils/index.js'
import ProjectDialog from './projectDialog.vue'
import InformationView from './information.vue'
import { auth } from '@/utils/auth'
export default {
  name: 'Project',
  components: {
    ProjectDialog,
    InformationView
  },
  data() {
    return {
      importUrl: process.env.VUE_APP_BASE_API + '/biz/project/import',
      elLoading: false,
      showInformation: false,
      showDialog: false,
      loading: false,
      selectInfo: {
        name: '',
        code: '',
        survey: null
      },
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      detail: {},
      fileList: [],
      dicList: {},
      checkedList: []
    }
  },
  async mounted() {
    this.handleChangePage()
  },
  methods: {
    reset() {
      window.open('https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/101.pdf','_target')
      this.selectInfo = {
        name: '',
        code: '',
        location: null
      }
    },
    toCreate(row) {
      if(this.permissions.indexOf('list')==-1) {
        this.$message({
					message: '暂无权限！',
					type:'warning',
				});
        return
      }
      if(!row.state) {
        this.$router.push({path: '/ticket/list', query: {selected: row.id}});
      }
    },
    headerToken() {
      return {'accessToken': auth.getToken()}
    },
    //下载导入模板
    downloadDemo() {
      // window.location.href = 'https://newjieyin.oss-cn-beijing.aliyuncs.com/violation/ticket/1703683881380PsG47.xlsx'
      this.openLoading()
      exportDemo().then(res => {
        let blob = res
        let reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          let a = document.createElement('a')
          a.download = '工程项目导入模板'
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
        this.closeLoading()
      }).catch(error => {
        this.closeLoading()
      })
    },
    //选择导出项目
    handleSelectionChange(val) {
      this.checkedList = val
    },
    exportList() {
      let ids = this.checkedList.map(item => { return item.id })
      let params = {ids: ids, pageNum: this.page, pageSize: this.pageSize}
      this.openLoading()
      exportProject(params).then(res => {
        let blob = res
        let reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          let a = document.createElement('a')
          a.download = '工程项目'
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
        this.closeLoading()
      }).catch(error => {
        this.closeLoading()
      })
    },
    handleChangePage() {
      this.loading = true
      let params = {...this.selectInfo, pageNum: this.page, pageSize: this.pageSize}
      getProjectPage(params).then(res => {
        const { data } = res
        this.total = data.total
        this.tableData = data.list
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    handleChange() {

    },
    handleSuccess(res, file, fileList) {
      if(res.msg) {
        this.$message.error('导入失败' + res.msg);
      } else {
        this.$message({
          message: '导入成功',
          type:'success',
        })
        this.handleChangePage()
      }
    },
    close(refresh) {
      this.showDialog = false
      if(refresh) this.handleChangePage()
    },
    dateFormat(row, column) {
      var date = row[column.property];
      if(date) {
        return parseTime(date,'{y}-{m}-{d}')
      } else {
        return '-'
      }
    },
    openLoading(){
      this.elLoading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    closeLoading(){
      this.elLoading.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.select_box {
  .title {
    font-size: 15px;
    margin-bottom: 10px;
  }
}
.table_box {
  .footer {
    margin-top: 10px;
    text-align: center;
  }
}
</style>
